<script setup lang='ts' name="protocol-management-info">
import type { VxeGridListeners, VxePagerEvents, VxeTableEvents, VxeTableInstance } from 'vxe-table'

import { CirclePlus } from '@element-plus/icons-vue'
import { delPrivileges, getPrivileges } from '@fl/api/iam-api'
import { SearchForm, SearchTable } from '@fl/components'
import ButtonItem from '@fl/components/button-item.vue'
import { cloneDeep } from 'lodash-es'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'

import { useDialog } from './hooks/use-dialog'
import { useForm } from './hooks/use-form'
import { useTable } from './hooks/use-table'

const router = useRouter()

const schema: PlusColumn[] = [
    {
        colProps: {
            span: 6,
        },
        label: '项目名称',
        prop: 'name',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 6,
        },
        label: '收货人',
        prop: 'name',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 6,
        },
        label: '收货人电话',
        prop: 'name',
        valueType: 'copy',
    },
] as const

const state = {
    price: '',
}
const form = ref({
    ...state,
})

function reset() {
    form.value = {
        ...state,
    }
    vm.exposed.getData()
}
const footBtn = [
    {
        label: '取消',
        type: 'default',
        value: 'cance',
    },
    {
        label: '保存',
        value: 'save',
    },
    {
        label: '确认订单',
        type: 'primary',
        value: 'confirm',
    },
]

const detail = ref<any>({
    isFile: false,
})

const show = ref(true)

function doAction(item: any, row?: any) {
    switch (item.value) {
        case 'view':
            detail.value = cloneDeep(row)
            show.value = false
            break
        case 'edit':
            doAdd(row.id)
            break
        case 'delete':
            router.go(-1)
            break
        default:
            break
    }
}

function doAdd(id?: any) {
    console.log(222, id)
}

async function getData() {
    // getGridOptions.loading = true
    // getPrivileges({
    //     ...form.value,
    //     page: getGridOptions.pagerConfig.currentPage,
    //     page_size: getGridOptions.pagerConfig.pageSize,
    // }).then((res: any) => {
    //     getGridOptions.pagerConfig.total = res.total ?? 0
    //     getGridOptions.data = res?.items ?? []
    //     getGridOptions.loading = false
    // })
}
getData()
</script>

<template>
    <el-card mb-20>
        <div class="info-title">
            订单信息
        </div>

        <SearchForm v-model="form"
                    :columns="schema"
                    submit-text="查询"
                    @submit="() => getData()"
                    @reset="reset"
        />
    </el-card>

    <el-card mb-20>
        <div class="info-title">
            商品信息
        </div>

        <div class="info-row">
            <p>采购清单:  <span>0408协议.xlsx</span></p>
        </div>
    </el-card>

    <el-card>
        <div class="footer-btn">
            <div class="price">
                订单总金额
                <el-input v-model="form.price"
                          style="width: 100px"
                />元
            </div>

            <p>
                <ButtonItem :btns="footBtn"
                            @btn-click="doAction($event)"
                />
            </p>
        </div>
    </el-card>
</template>

<style lang="less" scoped>
.info-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 60px;
}

.info-row {
    color: #6e6f73;

    span {
        color: #72a9f1;
    }
}

.footer-btn {
    display: flex;
    justify-content: space-between;

    > p {
        line-height: 30px;
    }

    .price {
        &::before {
            content: '*';
            color: red;
            margin-right: 2px;
        }
    }
}
</style>
